<template>
  <div class="employees-container">
    <div class="app-container">
      <el-card>
        <Page-tools>
          <template #left>
            <div class="tips">
              <i class="el-icon-info" />
              <span>本月: 社保在缴 公积金在缴</span>
            </div>
          </template>
          <template #right>
            <el-button type="primary" size="small">历史归档</el-button>
            <el-button type="primary" size="small">导出</el-button>
          </template>
        </Page-tools>
      </el-card>
      <!-- 表格 -->
      <el-card style="margin-top: 10px;">
        <el-table border :data="tableList">
          <el-table-column label="序号" type="index" width="80" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式">
            <template slot-scope="scope">
              {{ _formatTime(scope.row.formOfEmployment ) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间">
            <template slot-scope="scope">
              {{ _formatDate(scope.row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template slot-scope="scope">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">分配角色</el-button>
              <el-button type="text" size="small" @click="delListData(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div style="height: 60px; margin-top: 10px">
          <el-pagination layout="prev, pager, next" :total="total" :page-size="page.size" @current-change="pageChage" />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
// 引入API接口
import { reqGetEmployeeList, delEmployee } from '@/api/employees'
// 引入时间处理
import dayjs from 'dayjs'
import constant from '@/api/constant/employees'
export default {
  data() {
    return {
      tableList: [],
      page: {
        page: 1,
        size: 8
      },
      total: 0
    }
  },
  created() {
    this.getEmployeesData()
  },
  methods: {
    // 获取员工数据
    async getEmployeesData() {
      const res = await reqGetEmployeeList(this.page)
      console.log(res)
      this.total = res.total
      this.tableList = res.rows
    },
    // 判断聘用形式
    _formatTime(val) {
      const types = constant.hireType
      const map = {}
      types.forEach(item => { map[item.id] = item.value })
      return map[val]
    },
    // 时间处理
    _formatDate(val) {
      return dayjs(val).format('YYYY-MM-DD')
    },
    // 点击跳转分页
    pageChage(value) {
      this.page.page = value
      this.getEmployeesData()
    },
    // 删除数据
    async delEmployeeData(id) {
      await delEmployee(id)
      // 提示
      this.$message.success('数据删除成功')
      // 重新渲染
      this.getEmployeesData()
    },
    // 点击删除数据
    delListData(id) {
      console.log(id)
      this.$confirm('你确认要删除么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.delEmployeeData(id)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
